<template>
  <div class="container" >
<!--    <div class="">{{question}}</div>-->
    <el-form class="form">
      <el-row class="row1" justify="start">
        <el-col :span="12" :pull="5">
          <div class="id">
            <span>ID： </span>
            <span class="insert">{{question.id}}</span>
          </div>
          </el-col>
        <el-col class="difficulty" :span="12">
          <span>难度： </span>
          <span class="insert">{{question.difficulty}}</span>

        </el-col>
      </el-row>
      <el-row class="row2" :gutter="5">
        <el-col :span="2" >
          <div class="index">{{index+1+"."}}</div>
          <div class="type" v-if="question.type===2"> (选择题)</div>
          <div class="type" v-else-if="question.type===3">(填空题)</div>
          <div class="type" v-else-if="question.type===4">(判断题)</div>
          <div class="type" v-else-if="question.type===5">(简答题)</div>
        </el-col>
        <el-col class="title" :span="18">{{question.title}}</el-col>
        <el-col class="score" :span="4">
          <span>总分: </span>
          <span class="insert">{{score}}</span>
          <span>分 </span>
        </el-col>

      </el-row>
<!--      选择题的答题区-->
      <template v-if="question.type===2">
        <el-row class="row3" v-for="(item,index) in question.qt_body.selections" :key="item">
          <el-col :span="2">
            <el-checkbox v-model="assist_choice[index]"></el-checkbox>
          </el-col>
          <el-col :span="2">
            {{index+1+"."}}
          </el-col>
          <el-col class="selection" :span="20">
            {{item}}
          </el-col>
        </el-row>
      </template>
<!--      填空题的答题区·-->
      <template v-else-if="question.type===3">
        <el-row class="row3" v-for="(item,index) in assist_blank" :key="index">
          <el-col :span="2">
            {{index+1+"."}}
          </el-col>
          <el-col :span="10" class="blank_row">
<!--            <el-input autosize resize="false" ></el-input>-->
            <el-input class="blank" v-model="assist_blank[index]" type="textarea" autosize resize="none" ></el-input>
          </el-col>
        </el-row>
      </template>
<!--      判断题的答题区-->
      <template v-else-if="question.type===4">
        <el-row class="row3">
          <el-col class="judging-radio-group">
            <template>
              <el-radio class="judging-radio" v-model="aq.answer_body" :label="true">对</el-radio>
              <el-radio v-model="aq.answer_body" :label="false">错</el-radio>
            </template>
          </el-col>
        </el-row>

      </template>
<!--      简答题的答题区-->
      <template v-else-if="question.type===5">
        <el-row class="row3">
          <el-col :span="4">
            你的答案:
          </el-col>
          <el-col :span="20">
            <el-input v-model="aq.answer_body" type="textarea" :autosize="{ minRows: 5, maxRows: 10}" resize="none" ></el-input>
          </el-col>

        </el-row>


      </template>

    </el-form>

  </div>
</template>

<script>
export default {
  name: "answerQuestion",
  props: {
    question: {
      type: Object,
    },
    index: {
      type: Number,
    },
    aq:{
      type: Object,
    }
  },
  computed: {
    score: function () {
      if (Array.isArray(this.question.qt_body.scoreDefault)) {
        let sum = 0;
        this.question.qt_body.scoreDefault.forEach(i => sum += i)
        return sum;
      } else return this.question.qt_body.scoreDefault;
    },

  },
  data() {
    return {
      qt_body: null,
      answer_body: [],
      maxAnswerNum:0,
      assist_choice:[],
      assist_blank:[1,2,3],
    }
  },
  methods: {
    initAnswerBody() {
        if(this.question.type===2){
            this.maxAnswerNum = this.question.answersNum;
            //初始化选择题辅助数组
            this.assist_choice = new Array(this.question.qt_body.selections.length).fill(false);
            //初始化选择题的用户答案
            if(this.question?.id && this.aq?.eq_id && this.aq?.answer_body){
              this.answer_body = this.aq.answer_body;
              for (let i = 0; i < this.aq.answer_body.length; i++) {
                let a = this.aq.answer_body[i];
                this.assist_choice[a-1] = true;
              }
            }else {
              this.answer_body =[];
              this.aq.answer_body = this.answer_body;
            }
        }
        else if(this.question.type===3){
          this.answer_body = [];
          this.maxAnswerNum = this.question.answersNum;
          //初始化填空题题辅助数组
          this.assist_blank = new Array(this.maxAnswerNum).fill("");
          //初始化填空题的用户答案
          if(this.question?.id && this.aq?.eq_id && this.aq?.answer_body){
            this.answer_body = this.aq.answer_body;
            for (let i = 0; i < this.aq.answer_body.length; i++) {
              this.assist_choice[i] = this.aq.answer_body[i];
            }
          }else {
            this.answer_body =this.assist_blank;
            this.aq.answer_body = this.answer_body;
          }
        }
        else if(this.question.type===4){
          this.answer_body = null;
        }
        else if(this.question.type===5){
          this.answer_body = "";
        }
        else throw {err:"err"}
    },
    addSelection(a,b){
      console.log(a,b)
    },
    setAnswerBody(){
      if(this.question.type===2){
        let a = [];
        this.assist_choice.forEach((item,index) =>{
          if(a) a.push(index+1);
        })
        this.answer_body = a;
      }

    },

  },
  created() {
    this.initAnswerBody();
  },
  watch:{
    assist_choice(){
      let a = [];
      for (let i = 0; i < this.assist_choice.length; i++) {
        if(this.assist_choice[i]) a.push(i+1);
      }
      this.answer_body = a;
      this.aq.answer_body = a;
    },
    assist_blank(){
      this.answer_body = this.assist_blank;
      this.aq.answer_body = this.assist_blank;
    },

  }
}
</script>

<style scoped lang="less">
*{
  padding:0;
  margin:0;
}
.container{
  //height:100px;
  width:100%;
  border-top:1px solid #4b4a4a;
  .form{
    padding:2rem 4rem;
  }
}

.title{
  text-align:start;
}
.score{
  text-align:end;
}
.difficulty{
  text-align:end;
}
.type{
  color:red;
  font-size:0.8rem;
  text-align:end;
}
.index{
  text-align:end;
  position: relative;
  right:15%;
  font-size:1.1rem;
  font-weight:600;
}
.selection{
  text-align:start;
}
.blank_row{
  text-align:start;
  .blank{
    border:0;
    //background-color:#1b6d85;
  }
}

.judging-radio-group{
  text-align:start;
  .judging-radio{
    display:block;
  }
}


.row1,.row2,.row3{
  margin:1rem 0 ;
  padding:1%;
}
.row3{
  margin:0;
}
.insert{
  border-bottom:1px solid #000000;
  white-space:nowrap;
  margin:0 0.25rem;
  padding:0 0.3rem
}

</style>